<template>
  <view class="order">
    <view class="navbar">
      <uni-nav-bar fixed="true" border="false" color="#FFF" statusBar="true" backgroundColor="#22b9a3" title="我的订单" />
    </view>
    <view class="content">
      <view class="tabcard">
        <uni-segmented-control :current="current" :values="items" style-type="text" active-color="#22b9a3"
          @clickItem="choiceStatue" />
      </view>
      <view class="list">
        <scroll-view scroll-y="true" @scrolltolower="fetchMore" class="scroll-Y">
          <view class="list">
            <view @click="gotoDetail(order)" class="item" v-for="(order,index) in orderList" :key="order.id">
              <view class="title">
                <text>订单号&nbsp;&nbsp;&nbsp;</text>
                <text>{{order.no}}</text>
                <uni-tag v-if="order.status==1" text="待支付" type="error" :inverted="true"></uni-tag>
                <uni-tag v-if="order.status==2" text="服务中" type="success" :inverted="true"></uni-tag>
                <uni-tag v-if="order.status==3" text="已完成" type="success" :inverted="true"></uni-tag>
                <uni-tag v-if="order.status==4" text="已取消" type="default" :inverted="true"></uni-tag>
              </view>
              <view class="program">
                <view class="name">
                  <text>{{order.programName}}</text>
                  <text>￥{{( order.totalPrice/100).toFixed(2)}}</text>
                </view>
                <view class="des">
                  <text>就诊人</text>
                  <text>{{order.paitentName}}</text>
                </view>
                <view class="des">
                  <text>就诊医院</text>
                  <text>{{order.hospitalName}}</text>
                </view>
                <view class="des">
                  <text>就诊时间</text>
                  <view class="value"><uni-dateformat :date="order.hopeTime"
                      format="yyyy-MM-dd hh:mm:ss"></uni-dateformat></view>
                </view>
                <view class="price">
                  <text>共计&nbsp;&nbsp;</text>
                  <text class="number">￥{{( order.payPrice/100).toFixed(2)}}</text>
                </view>
              </view>

              <view class="pay-card" v-if="order.status==1">
                <view class="card-content">
                  <view class="cal-btn" @click.prevent="cancelOrder(order.id)">取消订单</view>
                  <view class="buy-btn" @click.prevent="payNow(order.payOrderId)">立即支付</view>
                </view>
              </view>
            </view>
            <uni-load-more :status="loadStatue" iconType="circle" color="#22b9a3" />
          </view>
        </scroll-view>
      </view>
    </view>
  </view>
</template>

<script setup>
  import {
    ref
  } from 'vue';
  import * as http from '@/utils/http'
  import wechatMiniProgramPay from '@/utils/pay';
  import {
    showToastAndDo
  } from '@/utils/toast.js'
  import {
    onLoad,
    onShow
  } from '@dcloudio/uni-app'
  import {
    useUserInfo
  } from '@/stores/userinfo.js';
  const userInfo = useUserInfo()
  const param = {
    memberId: null,
    pageNo: 1,
    pageSize: 10,
    status: ''
  }
  onLoad(async (option) => {
    //判断登录信息
    userInfo.getLoginInfo()
    param.memberId = userInfo.loginData.userId
    queryOrder(param)
  })
  // onShow(() => {
  //   queryOrder(param)
  // })
  const items = ref(['全部', '待支付', '进行中', '已完成', '已取消'])
  const current = ref(0)

  const orderList = ref([])
  const loadStatue = ref('more')

  async function queryOrder(param) {
    loadStatue.value = 'loading'
    const result = await http.getRequest("/peizhen/order/page", param)
    if (result.code == 0) {
      //当数量小于pagesize时说明没有了
      if (result.data.list.length < param.pageSize) {
        loadStatue.value = 'noMore'
      } else {
        loadStatue.value = 'more'
      }
      orderList.value = orderList.value.concat(result.data.list)
    } else {
      uni.showToast({
        title: '查询订单失败',
        icon: 'error',
        duration: 1000
      })
    }
  }


  function choiceStatue(e) {
    //参数清理
    param.pageNo = 1;
    //列表清空
    orderList.value.length = 0
    if (e.currentIndex == 0) {
      //选择了所有
      param.status = ''
    } else if (e.currentIndex == 1) {
      param.status = 1

    } else if (e.currentIndex == 2) {
      param.status = 2
    } else if (e.currentIndex == 3) {
      param.status = 3
    } else if (e.currentIndex == 4) {
      param.status = 4
    }
    queryOrder(param)
  }
  //监听滚动栏
  function fetchMore() {
    //当nomore时，不再发送请求
    if (loadStatue.value == 'noMore') {
      return
    }
    param.pageNo = param.pageNo + 1,
      queryOrder(param)
  }

  function gotoDetail(order) {
    if (order.programId == 11) {
      uni.navigateTo({
        url: `/pages/order/order-detail/order-medicine-detail?orderId=${order.id}`
      })
    } else {
      uni.navigateTo({
        url: `/pages/order/order-detail/order-detail?orderId=${order.id}`
      })
    }
  }

  function payNow(payId) {
    wechatMiniProgramPay(payId)
  }
  //订单取消
  async function cancelOrder(id) {
    uni.showModal({
      title: '提示',
      content: '您确定要取消订单吗?',
      success: async function(res) {
        if (res.confirm) {
          const result = await http.putRequest("/peizhen/order/cancel", {
            id
          })
          if (result.code == 0) {
            showToastAndDo('取消订单成功', 'success', 1000, () => {
              //参数清理
              param.pageNo = 1;
              //列表清空
              orderList.value.length = 0
              queryOrder(param)
            })
          }
        }
      }
    })
  }
</script>

<style lang="scss" scoped>
  .order {
    background-color: $uni-bg-color-grey;

    .navbar ::v-deep .uni-nav-bar-text {
      font-size: $uni-font-size-title !important;
      font-family: "siyuan";
    }

    .tabcard {
      padding-top: 35rpx;
    }
  }

  ::v-deep .segmented-control__item--text {
    font-size: 35rpx !important;
  }

  .tabcard::v-deep .segmented-control__text {
    font-size: 28rpx;
  }

  .list {
    .item {

      margin: 20rpx 30rpx 20rpx 30rpx;
      background-color: #fff;
      padding: 10rpx;
      border-radius: 4rpx;

      .title {
        height: 100rpx;
        line-height: 100rpx;
        border-bottom: 4rpx solid #f5f5f5;

        uni-tag {
          margin-left: 200rpx;
        }
      }

      .program {
        margin-top: 40rpx;
        border-bottom: 4rpx solid #f5f5f5;

        .name {
          height: 80rpx;
          line-height: 80rpx;
          display: flex;
          justify-content: space-between;
          background-color: #f5f5f5;
          padding: 20rpx;
          border-radius: 20rpx;
        }

        .des {
          display: flex;
          justify-content: space-between;
          padding: 20rpx;
        }

        .price {
          padding: 20rpx;
          text-align: right;

          .number {
            font-size: 50rpx;
            color: #f15b5d;
          }

        }
      }

      //付款按钮
      .pay-card {
        padding: 20rpx;
      }

      .card-content {
        display: flex;
        justify-content: flex-end;
      }


      .buy-btn {
        margin-right: 10rpx;
        padding: 10rpx 40rpx;
        width: 140rpx;
        height: 50rpx;
        line-height: 50rpx;
        background-color: #22b9a3;
        color: #fff;
        border-radius: 50rpx;
        text-align: center;
        font-size: 28rpx;
        border: solid 2rpx #22b9a3;
      }

      .cal-btn {
        margin-right: 10rpx;
        padding: 10rpx 40rpx;
        width: 140rpx;
        height: 50rpx;
        line-height: 50rpx;
        color: darkgray;
        border-radius: 50rpx;
        text-align: center;
        font-size: 28rpx;
        border: solid 2rpx darkgray;
      }
    }
  }

  .scroll-Y {
    height: 1100rpx;
  }
</style>